<template>
  <div class="box">
    <div class="box_content">
      <div class="content">
        <div class="content_title">复垦委托协议生成</div>
        <div class="content_content">
          <div class="content_">复垦委托协议书模板</div>
          <div class="btn">
            <el-button @click="downLoad">下载</el-button>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content_title">复垦委托协议上传</div>
        <div class="content_content">
          <div class="content_">复垦委托协议书</div>
          <div class="upLoadImg" v-if="isProgressShow">
            <upload @beforeUpload="beforeUpload" @res="getRes" :accept="'.zip'" />
          </div>
        </div>
        <div class="uploadResult" v-if="isResult">
          <div class="marginTop20">
            <div class="title">上传结果</div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="fileName" label="附件名称"></el-table-column>
              <el-table-column prop label="上传结果">
                <template slot-scope="scope">
                  <span
                    :class="scope.row.flag=='true'?'':'uploadQuestionsTitle'"
                  >{{scope.row.flag=='true'?'上传成功':'上传失败'}}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pageStyle">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="needInfo.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="needInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { upImg } from '@/api/upImg'
import {
  downloadLandReclaimAgencyAgreement,
  save,
  queryLandReclaimAgreementFile,
  getZipId
} from '@/api/fkEntrust'
import upload from '@/components/upload'

export default {
  components: {
    upload
  },
  data() {
    return {
      downLoadLoading: false,
      dialogVisible: false,
      uploadText1: '上传',
      fileData1: {
        fileName: '',
        fileUrl: '',
        id: ''
      },
      tableData: [], //复垦文件列表

      isResult: false, //上传文件结果回显
      needInfo: {
        page: 1,
        size: 10
      },
      total: 0,
      zipId: '', //获取文件id
      isProgressShow: false
    }
  },
  created() {
    //RECLAIM_AGENCY_AGREEMENT_UPLOAD
    if (localStorage.getItem('router') == 'RECLAIM_AGENCY_AGREEMENT_UPLOAD') {
      this.isProgressShow = true
    } else {
      this.isProgressShow = false
      this.isResult = true
      this.getEntryResult()
    }
    if (localStorage.getItem('lookStatus') == 2) {
      this.isProgressShow = false
      this.isResult = true
      this.getEntryResult()
    }
    this.getId()
  },
  methods: {
    getId() {
      //查询文件id
      let obj = {
        projectId: localStorage.getItem('projectId')
      }
      getZipId(obj).then(res => {
        if (res.code == 1000) {
          this.zipId = res.data
        }
      })
    },
    // 上传前
    beforeUpload() {},
    // 上传后
    getRes(res) {
      const that = this
      this.fileData1.fileName = res.data.fileName
      this.fileData1.fileUrl = res.data.filePath
      this.fileData1.id = res.data.id
      var dataForm = {
        projectId: localStorage.getItem('projectId'),
        reclaimAgencyAgreementFileId: this.fileData1.id
      }
      save(dataForm).then(res1 => {
        that.getEntryResult()
        that.isResult = true
      })
    },
    getEntryResult() {
      //上传结果回显
      let obj = {
        projectId: localStorage.getItem('projectId'),
        page: this.needInfo.page,
        size: this.needInfo.size
      }
      queryLandReclaimAgreementFile(obj).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
      })
    },
    handleSizeChange(val) {
      this.needInfo.size = val
      this.getEntryResult()
    },
    handleCurrentChange(val) {
      this.needInfo.page = val
      this.getEntryResult()
    },
    handleClose() {
      this.dialogVisible = false
    },
    downLoadWenJian(row) {
      var downLoadSrc = this.$https + row.filePath
      var a = document.createElement('a') // 创建a标签
      a.setAttribute('download', '') // download属性
      a.setAttribute('href', downLoadSrc) // href链接
      a.click() // 自执行点击事件
    },
    downLoad() {
      var a = document.createElement('a')
      a.setAttribute('href', this.$https + '/pc/file/download?id=' + this.zipId)
      a.setAttribute('download', '') // download属性
      a.click()
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.box {
  padding: 30px;
}
.box_content {
  border: 1px solid #efefef;
}
.content_title {
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  font-size: 18px;
  color: #333;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}
.content_content {
  display: flex;
  align-items: center;
  margin: 40px;
}
.content_ {
  font-size: 13px;
  color: #444;
  font-weight: bold;
  padding-right: 15px;
}

.uploadResult {
  font-size: 14px;
  margin: 0 40px;
}
.uploadQuestionsTitle {
  color: #c40000;
}
.marginTop20 {
  margin-top: 15px;
}
.boxItem_content_row_item_input_input {
  width: 200px;
}
.pageStyle {
  text-align: center;
  margin: 20px;
}
.title {
  width: 100%;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-bottom: none;
  font-weight: bold;
  color: #666;
}
</style>